<template id="userPageBody">
  <div id="userPage">

    <template v-if="user">

      <div id="header">
        <van-image round width="80" height="80" :src="user?.avatarUrl"/>
        <van-cell :title="user.nickname" is-link to="/user/update" size="large" :label="user.userInfo">
          <span v-if="user.nickname === null">点击编辑个人信息</span>
        </van-cell>
      </div>

      <!--      下滑分割线-->
      <van-divider/>

      <!--      我的标签展示-->
      <van-cell center style="margin-top: 15px" is-link to="/user/tag">
        <template #title>
          <span>我的标签</span>
        </template>
        <template #value>
          <van-tag v-for="tag in user.tags" plain type="danger" style="margin-right: 8px;margin-top: 8px">
            {{ tag }}
          </van-tag>
        </template>
      </van-cell>

      <!--三个图标按钮-->
      <van-grid :border="true" clickable="true" :column-num="3" style="padding: 10px">
        <van-grid-item @click="toMyCreateTeam">
          <van-icon name="medal-o" color="#0048ff" size="20px"/>
          <span style="margin-top: 6px; font-size: 12px">创建的队伍</span>
        </van-grid-item>
        <van-grid-item @click="toMyJoinTeam">
          <van-icon name="friends-o" color="#11d35d" size="20px"/>
          <span style="margin-top: 6px; font-size: 12px">加入的队伍</span>
        </van-grid-item>
        <van-grid-item @click="toShowMyInfo">
          <van-icon name="comment-circle-o" color="#0c9dea" size="20px"/>
          <span style="margin-top: 6px; font-size: 12px">联系作者</span>
        </van-grid-item>
      </van-grid>


<!--    退出登录-->
      <van-button style="margin-top: 20px" color="linear-gradient(to right, #ff6034, #ee0a24)" type="primary" round size="large" @click="userLogout">退出登录</van-button>
    </template>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../../api/myAxios";
import {Dialog, Toast} from "vant";
import {getCurrentUser} from "../../services/user";

// const user = {
//   id: 1,
//   username: '鱼皮',
//   userAccount: 'dogYupi',
//   avatarUrl: 'https://636f-codenav-8grj8px727565176-1256524210.tcb.qcloud.la/img/logo.png',
//   gender: '男',
//   phone: '123112312',
//   email: '12345@qq.com',
//   planetCode: '1234',
//   createTime: new Date(),
// }

const user = ref();

const router = useRouter();

onMounted(async () => {
  let currentUser = await getCurrentUser();
  if (currentUser) {
    user.value = currentUser
    console.log(user, '用户信息')
    if (user.value.tags) {
      user.value.tags = JSON.parse(user.value.tags)
    }
  } else {
    Toast("未登录")
    await router.replace("/user/login")
  }
})

const showInfo = ref(false)

const toMyCreateTeam = () => {
  Toast("正在跳转创建的队伍...")
}
const toMyJoinTeam = () => {
  Toast("正在跳转加入的队伍...")
}
const userLogout = () => {
  Dialog.confirm({
    title: '提示',
    message: '是否确认退出登录？',
  }).then(() => {
    // on confirm
    myAxios.post("/user/logout").then(res => {
      if (res.code === 0) {
        Toast.success("退出成功")
        router.replace("/user/login")
      } else {
        Toast.fail("退出失败")
      }
    })
  }).catch(() => {})
}
const toShowMyInfo = () => {
  Dialog.alert({
    title: '联系方式',
    message: "phone: " + "15831765695" + "\n" + "email : 2798679648@qq.com"+"\n"+"gitee: https://gitee.com/zhangshuaihong",
  })
}

const toEdit = (editKey: string, editName: string, currentValue: string) => {
  router.push({
    path: '/user/edit',
    query: {
      editKey,
      editName,
      currentValue,
    }
  })
}
</script>

<style scoped>


:deep(.van-grid-item__text) {
  font-size: 12px;
}


#header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.footer{
  background-color: aliceblue;
  text-align: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
